<template>
	<view class="landlord">
		<view class="landlord_top" @click="showrp =false">
			<view class="cancel">
				<u-icon @click="cancels" name="close" color="#c2d5ff" size="20"></u-icon>
			</view>
			<view class="left">
				<u-avatar :src="avatar"></u-avatar>
			</view>
			<view class="right">
				<view class="top">
					<text>{{nickname}}</text><text style="color: #eee;font-size: 25rpx;margin-left: 20rpx;font-family: '楷体';">楼主</text>
				</view>
				<view class="middle">
					<view class="middle_left">
						{{datatime}}
					</view>
					<view class="middle_right">
						四川
					</view>
				</view>
				<view class="centent" @click="goreplay">
					{{comment_content}}
				</view>
				<view class="landlord_buttom">
					<u-icon name="thumb-up" color="#c2d5ff" size="20"></u-icon>
					<text>10</text>
				</view>
			</view>
		</view>
		<view class="landlord_bar" @click.stop="showrp=false">
			<view v-if="islist" class="scrollytop">
				<scroll-view scroll-top="true" :scroll-y="true" class="scroll-Y">

					<view v-for="item in commentlist" :key="item._id">
						<reply-item @click.native="showrp =false" :item="item"></reply-item>
					</view>
				</scroll-view>
			</view>
			<view v-if="isshow">
				<u-skeleton rows="6" title loading></u-skeleton>
			</view>
			<view v-if="nodata" class="nodata">
				暂无评论~~
			</view>
		</view>

		<view class="replaysent" @click="showrpaply">
			回复：{{nickname}}
		</view>

		<view class="test" v-if="showrp">
			<view class="test_top" style="text-align: center;">
				回复楼主
			</view>
			<view class="info">
				<view class="left">
					<u--input color="#A7C5BD" maxlength="50" placeholder="说点什么吧" border="surround" v-model="value"></u--input>

				</view>
				<view class="right">
					<u-button text="发送" @click="sentinfo" color='#A7C5BD' shape="circle"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database()
	//触底事件
	// @scrolltolower="scrolltolower"
	import {
		formatDate
	} from '@/utils/time.js'
	export default {
		name: "landlord",
		data() {
			return {
				showrp: false,
				value: '',
				commentlist: [],
				//展示骨架屏
				isshow: true,
				//展示数据
				islist: false,
				//是否有数据
				nodata: false,
				//无感改变品论数量
				updatenum:false
			};
		},
		onLoad() {

			// this.gettwocomment()
		},
		mounted() {
			this.gettwocomment()
			
		},
		onShow() {

		
		},
		props: ['info', 'video_id', 'user_id'],
		computed: {
			avatar() {
				if (this.info.user_id) {
					return this.info.user_id[0].avatar
				}
			},
			comment_content() {
				if (this.info) {
					return this.info.comment_content
				}
			},
			datatime() {
				if (this.info) {
					return formatDate(this.info.comment_date)
				}
			},
			nickname() {
				if (this.info.user_id) {
					return this.info.user_id[0].nickname
				}
			}
		},
		watch: {
			info: {
				immediate: true,
				handler() {
					
				}
			},
			video_id: {
				immediate: true,
				handler() {
					
				}
			},
			user_id: {
				immediate: true,
				handler() {
					

				}
			},
			commentlist: {
				handler() {
					
					this.$emit('commentnum', this.commentlist.length)
				}
			}
		},
		methods: {
			goreplay() {
				
			},
			cancels() {
				this.$emit('cancles')
			},
			//回复
			showrpaply() {
				if(!store.hasLogin){
					uni.showToast({
						title:'未登录',
						icon:"none"
					})
					return;
				}
				this.showrp = true
			},
			async sentinfo() {
				let tempstring=''
				this.updatenum=!this.updatenum
				if(this.updatenum){
					tempstring='.0'
				}else{
					tempstring='.1'
				}
				this.$emit('uppdatatotal',this.info._id+tempstring)
				let obj = {
					video_id: this.video_id,
					user_id: this.user_id,
					comment_content: this.value,
					comment_type: 1,
					reply_comment_id: this.info._id,
					reply_user_id: this.info.user_id[0]._id
				}
				await db.collection('criticism').add({
					...obj,
					like_count:[]
				}).then(res=>{
						
					this.gettwocomment()
					this.value = ''
					this.showrp = false
					console.log('666')
				
				})

			},
			async gettwocomment() {
				let commentTemp = db.collection('criticism').where({
					video_id: this.video_id,
					comment_type: 1,
					reply_comment_id: this.info._id,

				}).field('user_id,comment_content,comment_date').getTemp()
				let userinfoTemp = db.collection('uni-id-users').field('_id,avatar,nickname').getTemp()
				await db.collection(commentTemp, userinfoTemp).orderBy('comment_date desc').get().then(res => {
				
					this.commentlist = res.result.data
					this.islist = true
					this.isshow = false
					if (res.result.data.length == 0) {
						this.nodata = true
						this.islist = false
					} else {
						this.nodata = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@keyframes shows {
		0% {
			transform: translateY(15vh);
		}

		100% {
			transform: translateY(0);
		}
	}

	.landlord {

		height: 70vh;
		background-color: #11265c;
		position: relative;
		overflow: hidden;
		.landlord_top {
			position: relative;
			border-bottom: 2px #283b65 solid;
			box-sizing: border-box;
			background-color: #3c4f6d;
			display: flex;
			padding: 20rpx;

			.cancel {
				position: absolute;
				right: 10rpx;
			}

			.right {
				margin-left: 20rpx;

				.top {
					color: deeppink;
					display: flex;
					align-items: center;
				}

				.middle {
					margin: 10rpx 0;
					display: flex;
					font-family: '楷体';

					view {
						margin-right: 10rpx;
					}
				}

				.centent {
					padding: 10rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
					font-family: 'YouYuan';
				}

				.landlord_buttom {

					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
						font-size: 25rpx;
					}

				}
			}
		}


		.landlord_bar {
			height: 45vh;

			.nodata {
				font-size: 50rpx;
				text-align: center;
				margin-top: 30rpx;
				font-family: 'YouYuan';
			}

			.scrollytop {
				height: 100%;
				
				.scroll-Y {
					height: 100%;
				}
			}

		}


		.replaysent {
			height: 5vh;
			position: fixed;
			width: 100vw;
			background-color: #283b65;
			bottom: 0;
			line-height: 5vh;
			color: hotpink;
			text-align: center;
			border-radius: 30rpx;
			margin-top: 10rpx;

		}

		.test {

			height: 15vh;
			width: 100%;
			background-color: #2F3A59;
			animation: shows 0.5s;
			animation-fill-mode: forwards;
			border-top: 1px solid #eee;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: absolute;
			bottom: 0;
			.test_top {
				box-sizing: border-box;
				padding: 15rpx 0;
				font-family: '楷体';
			}

			.info {
				display: flex;

				.left {
					padding-right: 10rpx;
					flex: 8;
				}

				.right {
					flex: 2
				}
			}
		}
	}
</style>